<div class="mifa">
  <component-calendar-header [(view)]="view" [(viewDate)]="viewDate"></component-calendar-header>

  <context-menu #basicMenu>
    <ng-template contextMenuItem (execute)="addEvent($event.item)">
      Add event
    </ng-template>
  </context-menu>
  <ng-template
    #monthCellTemplate
    let-day="day"
    let-openDay="openDay"
    let-locale="locale"
    let-tooltipPlacement="tooltipPlacement"
    let-highlightDay="highlightDay"
    let-unhighlightDay="unhighlightDay"
    let-eventClicked="eventClicked"
  >
    <div
      class="fill-height"
      [contextMenu]="basicMenu"
      [contextMenuSubject]="day.date">
      <div class="cal-cell-top">
        <span class="cal-day-badge" *ngIf="day.badgeTotal > 0">{{ day.badgeTotal }}</span>
        <span class="cal-day-number">{{ day.date | calendarDate:'monthViewDayNumber':locale }}</span>
      </div>

      <div class="cal-events">
        <div
          class="cal-event"
          *ngFor="let event of day.events"
          [style.backgroundColor]="event.color.primary"
          [ngClass]="event?.cssClass"
          (mouseenter)="highlightDay.emit({event: event})"
          (mouseleave)="unhighlightDay.emit({event: event})"
          [mwlCalendarTooltip]="event.title | calendarEventTitle:'monthTooltip':event"
          [tooltipPlacement]="tooltipPlacement"
          (click)="$event.stopPropagation(); eventClicked.emit({event: event})"
        ></div>
      </div>
    </div>
  </ng-template>

  <ng-template
    #weekHeaderTemplate
    let-days="days"
    let-locale="locale"
    let-dayHeaderClicked="dayHeaderClicked"
  >
    <div class="cal-day-headers">
      <div
        class="cal-header"
        *ngFor="let day of days"
        [class.cal-past]="day.isPast"
        [class.cal-today]="day.isToday"
        [class.cal-future]="day.isFuture"
        [class.cal-weekend]="day.isWeekend"
        (click)="dayHeaderClicked.emit({day: day})"
        [contextMenu]="basicMenu"
        [contextMenuSubject]="day.date"
      >
        <b>{{ day.date | calendarDate:'weekViewColumnHeader':locale }}</b><br />
        <span>{{ day.date | calendarDate:'weekViewColumnSubHeader':locale }}</span>
      </div>
    </div>
  </ng-template>

  <ng-template
    #dayHourSegmentTemplate
    let-segment="segment"
    let-locale="locale"
    let-segmentHeight="segmentHeight"
  >
    <div
      class="cal-hour-segment"
      [style.height.px]="segmentHeight"
      [class.cal-hour-start]="segment.isStart"
      [class.cal-after-hour-start]="!segment.isStart"
      [ngClass]="segment.cssClass"
      [contextMenu]="basicMenu"
      [contextMenuSubject]="segment.date"
    >
      <div class="cal-time">
        {{ segment.date | calendarDate: 'dayViewHour':locale }}
      </div>
    </div>
  </ng-template>

  <div [ngSwitch]="view">
    <mwl-calendar-month-view
      *ngSwitchCase="'month'"
      [viewDate]="viewDate"
      [events]="events"
      (eventClicked)="handleEvent($event)"
      [refresh]="refresh"
      (eventTimesChanged)="eventTimesChanged($event)"
      [cellTemplate]="monthCellTemplate"
    >
    </mwl-calendar-month-view>

    <mwl-calendar-week-view
      *ngSwitchCase="'week'"
      [viewDate]="viewDate"
      [events]="events"
      [dayStartHour]="minHour"
      [dayEndHour]="maxHour"
      (eventClicked)="handleEvent($event)"
      [headerTemplate]="weekHeaderTemplate"
      [refresh]="refresh"
      [hourSegments]="2"
      (eventTimesChanged)="eventTimesChanged($event)">
    </mwl-calendar-week-view>

    <mwl-calendar-day-view
      *ngSwitchCase="'day'"
      [viewDate]="viewDate"
      [events]="events"
      [dayStartHour]="minHour"
      [dayEndHour]="maxHour"
      [hourSegments]="2"
      (eventClicked)="handleEvent($event)"
      [hourSegmentTemplate]="dayHourSegmentTemplate"
      [refresh]="refresh"
      (eventTimesChanged)="eventTimesChanged($event)"
    >
    </mwl-calendar-day-view>
  </div>

  <section>
    Edit events
    <button class="btn btn-primary pull-right" (click)="addEvent()">
      Add new
    </button>
    <div class="clearfix"></div>
  </section>

  <div class="table-responsive">
    <table class="table table-bordered">
      <thead>
      <tr>
        <th>Title</th>
        <th>Primary color</th>
        <th>Secondary color</th>
        <th>Starts at</th>
        <th>Ends at</th>
        <th>Remove</th>
      </tr>
      </thead>

      <tbody>
      <tr *ngFor="let event of events">
        <td>
          <input
            type="text"
            class="form-control"
            [(ngModel)]="event.title"
            (keyup)="refresh.next()"
          />
        </td>
        <td>
          <input
            type="color"
            [(ngModel)]="event.color.primary"
            (change)="refresh.next()"
          />
        </td>
        <td>
          <input
            type="color"
            [(ngModel)]="event.color.secondary"
            (change)="refresh.next()"
          />
        </td>
        <td>
          <input
            class="form-control"
            type="text"
            mwlFlatpickr
            dateFormat="Y-m-dTH:i"
            altFormat="F j, Y H:i"
            [(ngModel)]="event.start"
            (ngModelChange)="refresh.next()"
            (change)="changeDateInput(event)"
            [altInput]="true"
            [convertModelValue]="true"
            [enableTime]="true"
            placeholder="Not set"
          />
        </td>
        <td>
          <input
            class="form-control"
            type="text"
            mwlFlatpickr
            [(ngModel)]="event.end"
            (ngModelChange)="refresh.next()"
            [altInput]="true"
            [convertModelValue]="true"
            [enableTime]="true"
            dateFormat="Y-m-dTH:i"
            altFormat="F j, Y H:i"
            placeholder="Not set"
          />
        </td>
        <td>
          <button class="btn btn-danger" (click)="deleteEvent(event)">
            Delete
          </button>
        </td>
      </tr>
      </tbody>
    </table>
  </div>
</div>
